<template>
	<view class="content-headImage">
		<view class="content-headImage-item">
			<view class="personal-information">
				<image :src="'http://127.0.0.1:8080' + postD.avatar"></image>
				<view class="nick-name-item">
					<view>{{postD.nickName}}</view>
					<view>{{postD.createTime}}</view>
				</view>
			</view>
			<!-- <view class="title">{{postD.title}}</view> -->
			<view class="content-button">
				<view class="content-button-item" @click="handleFollowClick" v-show="userid !== postD.userId">
					<view>{{postD.isFollowing == 0?followText:unfollowText}}</view>
				</view>
			</view>
		</view>
		<view class="post-content">
			<h3>{{postD.title}}</h3>
			<!-- <view >{{postD.content}}</view> -->
			<view v-html="postD.content" />
			<view class="content-Image-item" v-show="postD.imgUrl">
				<image v-for="(item,index) in postD.imgUrl" :src="item"></image>
			</view>
		</view>
		<!-- 引入评论组件 -->
		<!-- <comments /> -->
		<uni-section title="评论" type="line" class="aa">
			<template v-slot:right>
				<view class="comments-toal-count">共{{commentsList.length}}条</view>
			</template>
			<view class="comments-content" v-for="(item,index) in commentsList" :key="index">
				<view class="avatar-name">
					<image :src="'http://127.0.0.1:8080' + item.avatar"></image>
					<view>{{item.nickName}}</view>
				</view>
				<view class="content">
					<view>{{item.content}}</view>
					<!-- <comments :data="Data" /> -->
					<!-- 子评论 -->
					<!-- 	<view class="u-modal">
						<view class="commentChildren-top" v-for="(itemm,indexx) in commentsListRef " :key="indexx">
							<view class="name">{{itemm.name}}</view>
							<view class="content">{{itemm.content}}</view>
						</view>
					</view> -->
					<view class="time">{{item.createTime}}</view>
				</view>
				<!-- <view class="content-Image-item-icon">
					<image src="../../static/images/banner/ok.png"></image>
					<image @click="Againcomment(postD.id,item.id)" src="../../static/images/banner/comment.png"></image>
				</view> -->
			</view>
			<view class="empty-view"></view>
		</uni-section>

		<view class="bottom-comment">
			<view class="bottom-comment-item">
				<view class="comment" @click="handComment">
					<view>
						评论一句前排打call!
					</view>
				</view>
				<view class="major-imag">
					<view class="imag-collect">
						<image :src="postD.isCollect == 0? noCollect:Collected" @click="handleImageClick"></image>
					</view>
					<view class="imag-share">
						<image src="/static/images/banner/share.png" @click="handleImageShare"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 收藏成功提示信息 -->
		<u-toast ref="uToastRef"></u-toast>
		<!-- 关注成功提示信息 -->
		<u-toast ref="uFollow"></u-toast>
		<!-- 评论成功提示信息 -->
		<u-toast ref="uComment"></u-toast>
		<!-- 取消关注提示框 -->
		<u-modal :show="pop.show" :title="pop.title" :showCancelButton="true" @cancel="cancel"
			@confirm="confirm"></u-modal>
		<!-- 点击分享设置弹框 -->
		<u-popup :show="popup.show" @close="close" :closeable="true" round="5" mode="center">
			<view class="popup-content">
				<view class="popup-content-item">
					<image :src="shareImag"></image>
					<view>分享给朋友</view>
				</view>
			</view>
		</u-popup>
		<!-- 添加评论 -->
		<view class="u-modal">
			<u-modal :show="modelPop.show" :title="modelPop.title" @confirm="commentConfirm" @cancel="commentCancel"
				:showCancelButton="true">
				<u--textarea v-model="commentConten.content" placeholder="说说你的看法~" border="surround"></u--textarea>
			</u-modal>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue';
	import comments from './components/comments/index.vue'
	import {
		addFollow,
		delFollow,
		addOrCancel
	} from '@/api/follow.js'
	import {
		addCollect,
		delCollect,
		delCollectDel
	} from '@/api/collect.js'
	import {
		listComment,
		addComment,
		commentChildren
	} from '@/api/comment.js'
	import {
		getUser
	} from '@/utils/auth'
	//导入关注状态
	import {
		useUserStore
	} from '@/store/modules/user.ts'
	import {
		listPost,
		getPost
	} from '@/api/tiezi/post'
	import {
		addSchedule
	} from '@/api/schedule.js'
	import useSchedule from '@/hooks/useSchedule'
	let addCommentRef = ref(null);
	onMounted(() => {
		//这是浏览器的缓存，微信开发者工具不可调用
		//为uni-app自带的缓存机制,关注状态判断
		//调用评论接口
		listCommentm()
		startViewTimer()
	})
	//调用此生命周期，用来清除特定缓存
	onBeforeUnmount(() => {
		//清除发帖用户id
		uni.removeStorageSync('发帖用户id')
		// console.log('此组件已经卸载')
		//当页面离开时清除定时器
		clearViewTimer()
	})
	//将评论列表封装为一个方法
	const listCommentm = (() => {
		//评论列表
		// console.log(postD.value.id,'帖子的id是啥')
		listComment({
			postId: postId.value,
			parentId: 0
		}).then((res) => {
			console.log(res.rows, '123456res')
			commentsList.value = res.rows
		})
	})
	//解构赋值
	const {
		viewTimeOutId,
		startViewTimer,
		clearViewTimer
	} = useSchedule()
	//点击评论的评论
	const Againcomment = ((postId, commentId) => {
		console.log(postId, commentId, '88888')
		commentChildren({
			postId: postId,
			id: commentId
		}).then((res) => {
			console.log(res.rows, 'commentChildren')
		})
	})
	const commentsList = ref([])
	//取出当前登陆人的userid，如果被关注用户的id等于当前登陆人的id，则不显示关注字眼
	const userid = getUser()
	//从缓存中取出发帖人的id
	const postUserid = uni.getStorageSync('发帖用户id')
	// console.log(postUserid, '123456')
	console.log(uni.getStorageSync('发帖用户id'), '3333')
	const postD = ref({
		avatar: '',
		nickName: '',
		content: '',
		imgUrl: '',
		createTime: '',
		id: '', //帖子id
		userId: '', //发帖用户id
		isFollowing: 0, //关注状态
		isCollect: 0 //收藏状态
	})
	//设置是否关注状态位置
	const isFollowed = ref(false);
	const followText = ref('+关注')
	const unfollowText = ref('已关注')
	const uFollow = ref(null)
	//取消关注提示框
	const pop = ref({
		show: false,
		title: '确定不再关注?'
	})
	//点击关注事件触发
	const handleFollowClick = (() => {
		if (postD.value.isFollowing == 0) {
			//调用此接口添加关注
			// console.log(postUserid, '关注用户id是什么')
			console.log(postD.value.userId, 'postD')
			addOrCancel({
				id: postId.value,
				userId: postD.value.userId,
				myUserId: userid
			}).then((res) => {
				console.log(res, 'res')
				postD.value.isFollowing = 1
				//当前为已关注
				// 更新状态
				// isFollowed.value = true;
				// followText.value = '已关注';
				//调用uni-app的本地存储接口
				// uni.setStorageSync(`已关注用户id为:${postD.value.userId}`, 'true');
				uFollow.value.show({
					message: '关注成功',
					type: 'default',
					position: 'center'
				})
			})
		} else {
			pop.value.show = true;
		}
	})
	//取消关注触发
	const cancel = (() => {
		pop.value.show = false
	})
	//取消关注
	const confirm = (() => {
		if (postD.value.isFollowing == 1) {
			addOrCancel({
				id: postId.value,
				userId: postD.value.userId,
				myUserId: userid
			}).then((res) => {
				postD.value.isFollowing = 0
				uFollow.value.show({
					message: '取消成功',
					type: 'default',
					position: 'center'
				})
				pop.value.show = false
			})
		}

	})
	//帖子id
	const postId = ref()
	//父组件传递数据给子组件
	// const Data = ref({
	// 	postId: postId.value,
	// 	parentId: 0
	// })
	//发贴用户id

	// const postUserid = ref()
	//使用onLoad在此页面接收Recommend页面的参数
	onLoad((option) => {
		//将页数转化为对象形式
		// console.log(option.data, 'option')
		
		postId.value = parseInt(option.data)
		console.log(postId.value,'postId.value')
		//保存帖子id
		uni.setStorageSync('帖子id', postId.value);
		listPost({
			id: option.data
		}).then((res) => {
			console.log(res.rows[0], '123')
			//处理图片、视频信息
			for (let i = 0; i < res.rows.length; i++) {
				if (res.rows[i].imgUrl) {
					res.rows[i].imgUrl = JSON.parse(res.rows[i].imgUrl)
				}
				if (res.rows[i].videoUrl) {
					res.rows[i].videoUrl = JSON.parse(res.rows[i].videoUrl)
				}
			}
			postD.value = res.rows[0]
			console.log(postD.value.userId)
		})
		uni.showShareMenu({
			withShareTicket: true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus: ["shareAppMessage", "shareTimeline"]
		})
	})
	const onShareAppMessage = ((res) => {
		console.log(res, 'onShareAppMessage')
	})
	const value = ref('')
	//收藏图片
	const noCollect = ref('../../static/images/icon/collect01.png')
	const Collected = ref('../../static/images/icon/collect03.png')
	//设置收藏成功提示信息
	const uToastRef = ref(null)
	// 假设这是点击事件处理函数
	const isCollected = ref(false);
	// console.log(typeof isCollected, 'isCollected')
	//点击图片收藏
	const handleImageClick = (() => {
		if (postD.value.isCollect == 0) {
			//点击是收藏调用添加收藏接口
			// console.log(typeof postId.value, 'postId.value')
			addCollect({
				postId: postId.value,
				userId: userid
			}).then((res) => {
				console.log(res, '收藏成功')
				postD.value.isCollect = 1
				uToastRef.value.show({
					message: '收藏成功',
					type: 'default',
					position: 'center'
				})
			})
		} else {
			delCollectDel({
				postId: postId.value, //帖子id
				userId: userid //用户id
			}).then((res) => {
				console.log(res, '取消收藏成功')
				postD.value.isCollect = 0
				uToastRef.value.show({
					message: '已取消收藏',
					type: 'default',
					position: 'center'
				})
			})

		}


	})
	const shareImag = ref('../../static/images/icon/shareFrinds.png')
	//设置分享弹框
	const popup = ref({
		show: false
	})
	//点击关闭
	const close = (() => {
		popup.value.show = false
	})
	//评论属性
	const modelPop = ref({
		show: false,
		title: '评论',
	})
	//评论内容
	const commentConten = ref({
		content: ''
	})
	const uComment = ref(false)
	//评论确定
	const commentConfirm = (() => {
		if (commentConten.value.content) {
			addComment({
				postId: postId.value,
				userId: userid,
				content: commentConten.value.content
			}).then((res) => {
				modelPop.value.show = false
				console.log(res, '评论成功')
				uComment.value.show({
					message: '评论成功',
					type: 'default',
					position: 'center'
				})
				//刷新评论列表
				listCommentm()
			})
		}

	})
	//评论取消
	const commentCancel = (() => {
		modelPop.value.show = false
	})
	// 点击评论一句(增加评论)
	const handComment = (() => {
		// console.log(333)
		modelPop.value.show = true
		// showAddComponentModal.value = true
	})
	//点击图片分享
	const handleImageShare = (() => {
		// popup.value.show = true
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.content-headImage {
		padding: 15rpx;

		.content-headImage-item {
			display: flex;
			align-items: center;
			position: relative;

			.personal-information {
				display: flex;
				align-items: center;
				// font-size: 50rpx;
				flex: 3;

				image {
					margin-right: 10rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.nick-name-item {
					display: flex;
					flex-direction: column;
				}
			}

			.title {}
		}

		.content-button {
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: end;

			.content-button-item {
				font-size: 28rpx;
				line-height: 50rpx;
				background-color: #FF7F50;
				color: #fff;
				border-radius: 10rpx;

				view {
					padding: 3rpx 20rpx;
				}
			}
		}

		.post-content {
			margin-top: 20rpx;
			font-size: 35rpx;

			.content-Image-item {
				margin-top: 20rpx;

				image {
					border-radius: 15rpx;
					width: 100%;
					margin: 15rpx auto;
					height: 500rpx;
				}
			}
		}

		.aa {}

		:deep(.uni-section-header) {
			border-bottom: 2rpx solid #ccc;
		}

		.comments-total-count {
			font-size: 24rpx;
			color: rgba(123, 123, 123, 1);
		}

		.comments-content {
			position: relative;
			border-bottom: 2rpx solid #ccc;
			margin: 15rpx;

			image {
				margin-right: 10rpx;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}

			.avatar-name {
				display: flex;

				view {
					color: #898c99;
				}
			}

			.content {
				margin: 15rpx 70rpx auto;
				padding: 30rpx auto;

				// margin-left: 70rpx;
				.u-modal {
					background-color: #f2f2f2;
					border-radius: 15rpx;
					padding: 15rpx;

					.commentChildren-top {
						border-bottom: 2rpx solid #ccc;

						view {
							margin: 15rpx;
							padding: 15rpx auto;
						}

						.name {
							color: #c3c3c3;
						}

						.content {
							color: #aaaaaa;

						}
					}
				}

				.time {
					padding: 20rpx 0rpx;
					color: #D19275;
				}
			}

			.content-Image-item-icon {
				position: absolute;
				bottom: 20rpx;
				right: 0rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 50rpx;
				}
			}
		}

		//增加一个空标签
		.empty-view {
			padding: 50rpx;
		}

		.bottom-comment {
			position: fixed;
			bottom: 0rpx;
			// background-color: #fff;
			background-color: #ADD8E6;
			// text-shadow: #FF7F50;
			width: 100%;
			height: 120rpx;

			.bottom-comment-item {
				display: flex;
				align-items: center;

				.comment {
					flex: 1;
					// padding: 20rpx;
					width: 300rpx;
					height: 80rpx;
					margin: 20rpx 15rpx;
					// border: 2rpx solid 	#A9A9A9;
					border-radius: 30rpx;
					background-color: #A9A9A9;
					color: #fff;

					view {
						text-align: center;
						padding: 20rpx 2rpx;
					}
				}

				.major-imag {
					display: flex;
					flex: 1;
					justify-content: start;

					view {
						margin-right: 25rpx;
						margin-left: 10rpx;
					}

					image {
						// margin-bottom: 10rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}

			}
		}

		.popup-content {
			// width: 100%;
			// height: 300px;
			padding: 120rpx 260rpx;

			// margin: 100rpx;
			image {
				width: 100rpx;
				height: 100rpx;
			}

			.popup-content-item {
				text-align: center;
				margin: 0 auto;
			}
		}
	}
</style>